<!-- eslint-disable vue/multi-word-component-names -->
<template>
    <div class="orl">
        <div class="hed">
            <div class="hedh"></div>
            <div class="hedb">
                <router-link to="/home"><span><i class="iconfont icon-zuo"></i></span></router-link>
                <span @click="toMsg()"><i class="iconfont icon-lingdang-xianxing"></i></span>
            </div>
            <div class="hedp">
                <img src="https://img1.baidu.com/it/u=3977118833,1743347449&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=750"
                    alt="">
                <span>欧若拉</span>
                <button>签到</button>
            </div>
        </div>
        <div class="wz">
            <p>我的问诊</p>
            <div class="wzy">
                <img src="https://img0.baidu.com/it/u=572426642,3425604361&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
                    alt="">
                <span>当前问诊</span>
                <button>&gt;</button>
            </div>
            <div class="wze">
                <img src="https://img0.baidu.com/it/u=4229957199,382769252&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=458"
                    alt="">
                <span>历史问诊</span>
                <button>&gt;</button>
            </div>
        </div>
         <div class="gong">
    <van-grid :column-num="3">
      <van-grid-item
        v-for="item in gridItems"
        :key="item.text"
        :text="item.text"
        @click="handleItemClick(item)"
      >
        <template #icon>
          <i :class="`iconfont ${item.icon}`"></i>
        </template>
      
      </van-grid-item>
    </van-grid>
        </div>
    </div>
</template>
<script setup lang="ts">
import router from '@/router';
import { ref } from 'vue';


const  gridItems=ref([ 
 { icon: 'iconfont icon-dangan', text: '我的档案',routeName:"file"},
  { icon: 'iconfont icon-wodeqianbao', text: '我的钱包',routeName:"purse" },
  { icon: 'iconfont icon-wode_shoucang_48', text: '我的收藏',routeName :"collect"},
  { icon: 'iconfont icon-tousujianyi', text: '被采纳建议',routeName:"proposal" },
  { icon: 'iconfont icon-wodeshipin', text: '我的视频',routeName :"video"},
  { icon: 'iconfont icon-huaxiang', text: '我的病友圈',routeName:"circle" },
  { icon: 'iconfont icon-wode-wodeguanzhu', text: '我的关注',routeName:"follow" },
  { icon: 'iconfont icon-woderenwu', text: '我的任务',routeName:"task" },
  { icon: 'iconfont icon-shezhi', text: '设置管理',routeName:"set"},
])
const handleItemClick = (item: any) => {
  console.log(item); // 你可以在这里添加任何点击后的逻辑
  // 例如，根据item.text来路由到不同的页面
//   router.push({ name: item.routeName }); // 假设你有一个routeName在item中
router.push('/my/'+item.routeName)

//加上字符类型
sessionStorage.setItem('text',JSON.stringify(item.text))

};
//跳转信息页
const toMsg = () => {
  router.push('/message');
}
</script>
<style lang="scss">
.orl {
    width: 100%;
    flex: 1;
}

.hed {
    width: 100%;
    height: 170px;
   background: url("../../assets//image/My/my_background.png");
    border-radius: 0% 0% 55% 55%;

}
.hedh {
    width: 100%;
    height: 20px;
    border-bottom: 1px solid #fff;
}
.hedb {
    width: 100%;
    height: 25px;
  display: flex;
  justify-content: space-between;
  .icon-zuo{
    font-size: 20px;
  }
.icon-lingdang-xianxing{
    color: #fff;
    font-size: 20px;
}

}

.hedp {
    width: 100%;
    height: 70px;
    display: flex;
    img {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        margin-top: 7px;
        margin-left: 10px;
    }

    span {
        font-size: 14px;
        margin-left: 10px;
        margin-top: 24px;
    }

    button {
        width: 60px;
        height: 30px;
        border-radius: 10px;
        border: none;
        background-color: #fff;
        font-size: 12px;
        margin-left: 160px;
        margin-top: 20px;
    }
}

.wz {
    width: 82%;
    height: 130px;
    margin-top: -65px;
    margin-left: 30px;
    border-radius: 10px;
    background-color: #fff;
    /* border: 2px solid #ccc; */
    box-shadow: 3px 3px 5px 3px #ccc;

    p {
        font-size: 12px;
        margin-left: 15px;
    }
}

.wzy {
    width: 100%;
    height: 40%;
    display: flex;

    img {
        width: 35px;
        height: 35px;
        border-radius: 50%;
        margin-top: 7px;
        margin-left: 10px;
    }

    span {
        font-size: 13px;
        margin-top: 17px;
        margin-left: 15px;
        width: 80px;
    }

    button {
        width: 60px;
        height: 30px;
        border-radius: 10px;
        border: none;
        background-color: #fff;
        font-size: 12px;
        margin-left: 100px;
        margin-top: 15px;
        font-size: 18px;
    }
}

.wze {
    width: 100%;
    height: 39%;
    display: flex;

    img {
        width: 35px;
        height: 35px;
        border-radius: 50%;
        margin-top: 7px;
        margin-left: 10px;
    }

    span {
        font-size: 13px;
        width: 80px;
        margin-top: 17px;
        margin-left: 15px;
    }

    button {
        width: 60px;
        height: 30px;
        border-radius: 10px;
        border: none;
        background-color: #fff;
        font-size: 12px;
        margin-left: 100px;
        margin-top: 15px;
        font-size: 18px;
    }
}

.gong {
    width: 100%;
    height: 280px;
    margin-top: 70px;
}

.icon-dangan {
    color: red;
    font-size: 30px;
}

.icon-wodeqianbao {
    color: rgb(34, 218, 231);
    font-size: 30px;
}

.icon-wode_shoucang_48 {
    color: rgb(233, 203, 11);
    font-size: 30px;
}

.icon-tousujianyi {
    color: rgb(118, 196, 222);
    font-size: 30px;
}

.icon-wodeshipin {
    color: red;
    font-size: 30px;
}

.icon-huaxiang {
    color: rgb(214, 75, 20);
    font-size: 30px;
}

.icon-wode-wodeguanzhu {
    color: red;
    font-size: 30px;
}

.icon-woderenwu {
    color: rgb(209, 22, 172);
    font-size: 30px;
}

.icon-shezhi {
    color: rgb(20, 167, 236);
    font-size: 30px;
}
</style>
